// 组件通信
// 可以传递任意类型数据
// props传递的数据是只读的=》单向数据流
import React from 'react'
import { render } from '@testing-library/react'
// 子组件函数
const Fnc = (props) => {
    console.log('函数子组件', props)
    return (
        <div>
            <h1>组件通信-子han</h1>
            <p>{props.a}</p>
            <p>{props.c}</p>
            {/* 给事件处理函数=》传递实参 =》函数套函数 */}
            <button onClick={() => { props.fn(159) }}>调用父组件的方法</button>
            {/* 修改父组件state数据 */}
            <button onClick={props.chc}>修改父组件state数据</button>
        </div>
    )

}
// 子组件
class Child extends React.Component {
    constructor(props) {
        super(props)
        console.log(this.props)
    }
    state = {
        // c: 8007
    }
    render() {
        console.log('类子组件', this.props)
        return (
            <div>
                <h1>组件通信-子类</h1>
                <p>{this.props.b}</p>
                <p>{this.props.c}</p>
                <p>{this.state.c}</p>
                <button onClick={(e) => { this.props.fn2(1666) }}>调用父组件传递方法*</button>
            </div>
        )
    }
}
// 父组件
class Index extends React.Component {
    state = {
        a: 500,
        b: [911, 119],
        c: 8007
    }
    // 修改共享数据
    changeC = () => {
        this.setState({
            c: Math.random() * 1000
        })
    }
    fn = (data) => {
        console.log('我是父组件的方法', data)
    }
    // 子传父
    // 1. 父组件定义接收子组件共享数据的方法
    parData = (d) => {
        console.log('接收子组件数据：', d)
    }
    render() {
        return (
            <div>
                <h1>组件通信-父</h1>
                <button onChange={this.changeC}>修改C</button>
                <hr />
                <Fnc c={this.state.c} chc={this.changeC} fn={this.fn} a={this.state.a} />
                <hr />
                <Child c={this.state.c} fn2={this.parData} b={this.state.b} />
            </div>
        )
    }
}
export default Index